<template>
  <PageWrapper>
    <template #headerContent>
      <div class="mb-4">
        <a-button class="mr-2" @click="reloadTable"> 还原 </a-button>
        <a-button class="mr-2" @click="changeLoading"> 开启loading </a-button>
        <a-button class="mr-2" @click="changeColumns"> 更改Columns </a-button>
        <a-button class="mr-2" @click="getColumn"> 获取Columns </a-button>
        <a-button class="mr-2" @click="getTableData"> 获取表格数据 </a-button>
        <a-button class="mr-2" @click="getTableRawData"> 获取接口原始数据 </a-button>
        <a-button class="mr-2" @click="setPaginationInfo"> 跳转到第2页 </a-button>
        <a-button class="mr-2" @click="getPagination"> 获取分页信息 </a-button>
      </div>
      <div class="mb-4">
        <a-button class="mr-2" @click="getSelectRowList"> 获取选中行 </a-button>
        <a-button class="mr-2" @click="getSelectRowKeyList"> 获取选中行Key </a-button>
        <a-button class="mr-2" @click="setSelectedRowKeyList">
          设置选中行（设置1、2页的前3行）
        </a-button>
        <a-button class="mr-2" @click="clearSelect"> 清空选中行 </a-button>
      </div>
    </template>
    <BasicTable @fetch-success="onFetchSuccess" @register="registerTable">
      <!-- BasicTable 提供的插槽 -->
      <template #headerTop>
        <Alert show-icon>
          <template #message>
            <template v-if="checkedKeys.length > 0">
              <span>已选中{{ checkedKeys.length }}条记录(可跨页)</span>
              <a-button type="link" @click="checkedKeys = []" size="small">清空</a-button>
            </template>
            <template v-else>
              <span>未选中任何项目</span>
            </template>
          </template>
        </Alert>
      </template>
      <template #toolbar>
        <a-button>可自定义右侧状态区</a-button>
      </template>

      <template #customNoTitle>
        编号
        <BasicHelp text="我是编号表头的提示信息" />
      </template>
      <template #no="{ record }">
        <Tag color="green">
          {{ record.no }}
        </Tag>
      </template>

      <!-- BasicTable 提供了一个默认的插槽 作用于最后一项 方便我们直接操作 -->
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              icon: 'ant-design:form-outlined',
              divider: true,
            },
            {
              label: '删除',
              color: 'error',
              icon: 'ic:outline-delete-outline',
              onClick: handleDelete.bind(null, record),
            },
          ]"
          :dropDownActions="[
            {
              label: '启用',
              divider: true,
              popConfirm: {
                title: '是否启用？',
                confirm: handleOpen.bind(null, record),
              },
            },
            {
              label: '禁用',
              onClick: handleDisable.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>
  </PageWrapper>
</template>
<script lang="tsx" setup>
  import { ref, Ref, unref } from 'vue';
  import { Tag, Alert } from 'ant-design-vue';
  import {
    BasicTable,
    TableAction,
    ColumnChangeParam,
    useTable,
    BasicColumn,
  } from '/@/components/Table';
  import { BasicHelp } from '/@/components/Basic';
  import { PageWrapper } from '/@/components/Page';
  import { getBasicColumns, getBasicShortColumns } from './tableData';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { demoListApi } from '/@/api/demo/table';
  const { createMessage } = useMessage();

  const columns: BasicColumn[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      fixed: 'left',
      // width: 100,
    },
    {
      // 注意：当使用插槽渲染标题时，title这个字段显示的优先级更高
      // title: '编号',
      dataIndex: 'no',
      // width: 150,
      // 排序
      sorter: true,
      // 当前列隐藏
      // defaultHidden: true,
      // 插槽的方式自定义列 定义当前列的插槽名
      slots: { title: 'customNoTitle', customRender: 'no' },
    },
    {
      // title的优先级也比customRender优先级高
      title: '姓名',
      dataIndex: 'name',
      // width: 200,
      // antd提供的自定义渲染函数定义列
      customRender({ text }) {
        return <Tag color="success">{text} | 渲染函数的写法</Tag>;
      },
    },
    {
      title: '开始时间',
      // width: 200,
      sorter: true,
      dataIndex: 'beginTime',
      // customRender的优先级高于customCell
      customCell() {
        return {
          style: {
            color: 'red',
          },
        };
      },
    },
    {
      title: '结束时间',
      // width: 150,
      sorter: true,
      dataIndex: 'endTime',
    },
    {
      title: '地址',
      dataIndex: 'address',
    },
  ];

  const checkedKeys = ref<(string | number)[]>([]);

  const [
    registerTable,
    {
      setLoading,
      setColumns,
      getColumns,
      getDataSource,
      getRawDataSource,
      reload,
      getPaginationRef,
      setPagination,
      getSelectRows,
      getSelectRowKeys,
      setSelectedRowKeys,
      clearSelectedRowKeys,
    },
  ] = useTable({
    title: 'useTable示例',
    titleHelpMessage: '使用useTable调用表格内方法',
    api: demoListApi,
    columns,
    // 排序字段
    defSort: {
      field: 'name',
      order: 'ascend',
    },
    canResize: true,
    rowKey: 'id',
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    // 分页器被更改时触发 （调用方法的形式改变分页不会被触发）
    onChange() {
      console.log('onChange', arguments);
    },
    // 第一列的选择类型
    rowSelection: {
      type: 'checkbox', // 'checkbox' | 'radio'
      // 已勾选的table列组成的rowKey数组
      // 如果想控制勾选的数据，rowSelection最好还是通过props传参的形式进行配置，useTable中可以像下面这样用，但是类型不匹配，免不了要做类型转换
      selectedRowKeys: checkedKeys as any,
      onChange: onSelectChange as Fn,
    },
    onColumnsChange: (data: ColumnChangeParam[]) => {
      console.log('ColumnsChanged', data);
    },
    beforeFetch(data) {
      console.log('请求前执行 >>> ', data);
    },
    // 自定义最好一列，此列不需要在columns中添加（除非需要完全自定义）
    actionColumn: {
      // width: 200,
      title: '操作',
      slots: { customRender: 'action' },
    },
    // 使用搜索表单 将表单的查询集成进表格中
    useSearchForm: true,
  });

  function onFetchSuccess(data) {
    console.log('请求加载成功的回调 >>> ', data);
  }

  function onSelectChange(selectRowKeys: Ref<(string | number)[]>) {
    checkedKeys.value = unref(selectRowKeys);
  }

  // 重新初始化列
  function reloadTable() {
    setColumns(getBasicColumns());
    // 重新加载并将分页设置成第一页
    reload({
      page: 1,
    });
  }

  // 设置loading
  function changeLoading() {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 1000);
  }

  // 二次修改列 传入新的columns即可
  function changeColumns() {
    setColumns(getBasicShortColumns());
  }

  function getColumn() {
    createMessage.info('请在控制台查看！');
    console.log(getColumns());
  }

  function getTableData() {
    createMessage.info('请在控制台查看！');
    console.log(getDataSource());
  }

  // 请求接口返回的数据
  function getTableRawData() {
    createMessage.info('请在控制台查看！');
    console.log(getRawDataSource());
  }

  // 通过调用方法的形式设置分页
  function setPaginationInfo() {
    // 只改变分页 不会重载数据
    // setPagination({ current: 2 });

    // 快捷方法 直接指定加载具体页的数据
    // reload({ page: 2 });

    setPagination({ current: 2 });
    reload();
  }

  // 获取分页信息
  function getPagination() {
    createMessage.info('请在控制台查看！');
    console.log(getPaginationRef());
  }

  // 获取选中的行 取到的数据为非响应式数据
  function getSelectRowList() {
    createMessage.info('请在控制台查看！');
    console.log(getSelectRows());
  }

  // 获取选择的行，根据设置的rowKey提取每组对象中的值组成的数组
  function getSelectRowKeyList() {
    createMessage.info('请在控制台查看！');
    console.log(getSelectRowKeys());
  }

  // 设置选中的行
  function setSelectedRowKeyList() {
    setSelectedRowKeys(['0', '1', '2', '10', '11', '12']);
  }

  // 清空选中的行
  function clearSelect() {
    clearSelectedRowKeys();
  }

  function handleDelete(record) {
    createMessage.info('点击了删除');
    console.log('点击了删除', record);
  }
  function handleOpen(record) {
    createMessage.info('点击了启用');
    console.log('点击了启用', record);
  }

  function handleDisable(record) {
    createMessage.info('点击了禁用');
    console.log('点击了禁用', record);
  }
</script>
